@charset 'utf-8';

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.app {
    >.top {
        >.header-out {
            width: 100%;
            height: 40px;
            background-color: #333;

            >.header {
                margin: 0 auto;
                width: 1226px;

                >.header-nav {
                    width: 730px;

                    >ul {
                        list-style: none;

                        >li {
                            float: left;

                            >#app {
                                display: block;

                                >.header-nav-div {
                                    position: absolute;
                                    top: 40px;
                                    left: 730px;
                                    width: 124px;
                                    height: 0px;
                                    margin-left: -55px;
                                    -webkit-box-shadow: #aaa 0 1px 5px;
                                    box-shadow: 0 1px 5px #aaa;
                                    background-color: #fff;
                                    text-align: center;
                                    font-size: 14px;
                                    color: #333;
                                    z-index: 20;
                                    line-height: 1;
                                    overflow: hidden;
                                    // -webkit-transition: height .3s;
                                    transition: height 0.3s;

                                    // display: none;
                                    img {
                                        display: block;
                                        margin: 18px auto 12px;
                                        // border: 0;
                                        width: 90px;
                                        height: 90px;

                                    }
                                }

                            }

                            #app:hover .header-nav-div {
                                height: 140px;
                                // display: block;
                            }

                            >a {
                                color: #B0B0B0;
                                font-size: 12px;
                                text-decoration: none;
                                text-align: center;
                                line-height: 40px;
                                border-right: 1px solid #424242;
                                padding: 0 7px;

                                &:hover {
                                    color: #fff;
                                }
                            }

                            .header-nav-false {
                                padding-left: 0;
                            }

                            .header-nav-last {
                                border-right: 0;
                            }
                        }

                    }

                }

                >.header-login {
                    float: right;

                    >ul {
                        list-style: none;

                        >li {
                            float: left;

                            a {
                                color: #B0B0B0;
                                font-size: 12px;
                                text-decoration: none;
                                text-align: center;
                                line-height: 40px;
                                border-right: 1px solid #424242;
                                padding: 0 5px;

                                &:hover {
                                    color: #fff;
                                }
                            }

                            .header-login-last {
                                padding: 0 10px;
                                border-right: 0;
                            }
                        }

                    }
                }

                >.header-shop {
                    float: right;
                    background-color: #424242;
                    width: 120px;
                    height: 40px;
                    margin-left: 10px;

                    &:hover {
                        background-color: #fff;
                    }

                    >em {
                        position: absolute;
                        right: 147px;
                        top: 40px;
                        display: block;
                        font-size: 12px;
                        font-weight: 300;
                        height: 100px;
                        width: 340px;
                        z-index: 20;
                        background-color: #fff;
                        box-shadow: -3px 3px 10px 0.6px #B0B0B0;
                        ;
                        text-align: center;
                        line-height: 90px;
                        align-items: center;
                        display: none;
                    }


                    >span {
                        margin-left: 20px;
                        font-size: 20px;
                        color: #B0B0B0;
                        text-align: center;

                        >a {
                            // display: block;
                            color: #B0B0B0;
                            font-size: 12px;
                            text-decoration: none;
                            text-align: center;
                            line-height: 40px;
                            margin: 0 auto;
                        }
                    }




                }

            }
        }

        >.site-header {
            height: 100px;

            >.container {
                margin: 0 auto;
                height: 100px;
                width: 1226px;

                >.site-header-logo {
                    float: left;
                    height: 56px;
                    width: 56px;
                    margin: 22px 0;
                    background-image: url(../images/logo-mi2.png);
                    background-size: 100% 100%;
                }

                >.site-header-nav {
                    float: left;
                    padding: 22px 0 0 30px;

                    >ul {
                        list-style: none;
                        margin-left: 152px;

                        >li {
                            float: left;

                            >a {
                                text-decoration: none;
                                color: #333;
                                font-size: 16px;
                                line-height: 56px;
                                text-align: center;
                                padding: 26px 10px 38px;

                                &:hover {
                                    color: orangered;
                                }
                            }



                            
                            
                        }
                    }
                }

                >.site-header-search {

                    // float: right;
                    .site-header-search-btn {
                        float: right;
                        width: 245px;
                        height: 52px;
                        border: 1px solid #ccc;
                        margin-top: 22px;
                        padding-left: 10px;

                    }

                    div {
                        float: right;
                        width: 52px;
                        height: 52px;
                        margin-top: 22px;
                        border: 1px solid #ccc;

                        &:hover {
                            background-color: orangered;
                            color: #fff;
                        }

                        span {
                            font-size: 18px;
                            margin-left: 15px;
                            line-height: 52px;
                            text-align: center;
                        }
                    }
                }
            }
        }
    }


    >.hero-out {
        height: 670px;
        width: 100%;

        >.hero {
            width: 1226px;
            height: 460px;
            margin: 0 auto;
            position: relative;

            >.hero-left {
                height: 460px;
                background-color: #65696599;
                // float: left;
                padding: 20px 0;
                position: absolute;
                top: 0;
                left: 0;
                z-index: 1;

                ul {
                    // float: left;
                    list-style: none;

                    li {
                        >a {
                            display: block;
                            text-decoration: none;
                            color: #fff;
                            font-size: 14px;
                            line-height: 42px;
                            align-content: center;
                            height: 42px;
                            width: 234px;
                            padding: 0 0 0 30px;
                            position: relative;

                            &:hover {
                                background-color: orangered;
                            }

                            span {
                                position: absolute;
                                right: 20px;
                            }
                        }
                    }
                }
            }

        }

        >.hero-bottom {
            width: 1226px;
            height: 170px;
            margin: 14px auto;

            // border: 1px solid black;
            >.hero-bottom-left {
                float: left;
                width: 234px;
                height: 170px;
                background-color: #5f5750;

                // border: 1px solid black;
                >ul {

                    list-style: none;

                    >li {
                        float: left;

                        height: 76px;
                        width: 78px;

                        >a {
                            display: block;
                            text-decoration: none;
                            height: 92px;
                            width: 75px;
                            font-size: 12px;
                            padding: 22px 0 0;
                            text-align: center;
                            position: relative;

                            div {
                                margin: 0 auto;

                                img {
                                    height: 24px;
                                    width: 24px;
                                    margin: 0 23px 4px;
                                }

                                span {
                                    color: #fff;
                                }

                            }

                        }
                    }
                }
            }

            >.hero-bottom-right {
                float: left;
                padding-left: 14px;

                >img {
                    height: 170px;
                    width: 316px;

                    &:hover {
                        box-shadow: 0px 5px 10px 0.6px #B0B0B0;
                        transition: 0.8;
                    }

                }
            }

            >.hero-bottom-right-1 {
                padding: 0px;
                padding-left: 14px;
            }
        }

    }

    .center {
        width: 100%;
        background-color: #F5F5F5;
        padding: 25px 0 25px;

        >.center-top {
            width: 1226px;
            height: 120px;
            margin: 0 auto;

            >img {
                width: 1226px;
                height: 120px;
            }
        }

        >.center-center {
            >h2 {
                width: 1226px;
                height: 58px;
                margin: 0 auto;
                font-size: 22px;
                color: #333;
                line-height: 58px;
                font-weight: 200;
                align-items: center;

                >.center-hot {
                    float: right;
                    width: 124px;
                    height: 42px;
                    margin-top: 5px;

                    >li {
                        list-style: none;
                        float: right;
                        margin: -10px 0 5px 30px;
                        font-weight: 500;
                        height: 44px;
                        width: 32px;
                        font-size: 16px;
                        // color: #424242;       
                    }


                    li:nth-of-type(2) {
                        color: orangered;
                        border-bottom: 2px solid orangered;
                    }

                    li:nth-of-type(1) {
                        &:hover {
                            color: orangered;
                            border-bottom: 2px solid orangered;
                        }

                        &:hover+:nth-of-type(2) {
                            color: #424242;
                            border-bottom: none;
                        }
                    }

                    #center-hot-hot1 {
                        color: orangered;
                        border-bottom: 2px solid orangered;
                    }



                }

                >.center-mor {
                    height: 58px;
                    width: 92px;
                    float: right;

                    >a {
                        display: block;
                        height: 17.6px;
                        text-decoration: none;
                        font-size: 16px;
                        color: #424242;

                        &:hover {
                            color: orangered;
                        }
                    }

                }

            }

            >.center-center-one {
                height: 614px;
                width: 1226px;
                margin: 0 auto;

                >.center-center-one-left {
                    height: 614px;
                    width: 234px;
                    float: left;

                    &:hover {
                        position: relative;
                        top: -4px;
                        box-shadow: -3px 3px 10px 0.6px #B0B0B0;
                        transition: 0.8;
                    }

                    >img {
                        height: 614px;
                        width: 234px;
                    }
                }

                >.conter-conter-div {
                    height: 614px;
                    width: 992px;
                    float: left;

                    // border: 1px solid black;
                    >li {
                        list-style: none;
                        float: left;

                        >a {
                            display: block;
                            height: 300px;
                            width: 234px;
                            color: #fff;
                            text-decoration: none;
                            margin-bottom: 12px;
                            margin-left: 14px;
                            border: 1px solid;
                            background-color: #fff;
                            text-align: center;

                            &:hover {
                                position: relative;
                                top: -4px;
                                box-shadow: -3px 3px 10px 0.6px #B0B0B0;
                                transition: 0.8;
                            }

                            >img {
                                height: 160px;
                                width: 160px;
                                margin-top: 20px;
                            }

                            >h3 {
                                color: #333;
                                margin: 0 10px 2px;
                                font-size: 14px;
                            }

                            >p {
                                color: #B0B0B0;
                                margin: 0 10px 10px;
                                font-size: 12px;
                            }

                            >em {
                                margin: 0 10px 14px;
                                color: #ff6700;
                                font-size: 14px;

                                >span {
                                    color: #B0B0B0;
                                }
                            }
                        }
                    }

                    >.center-center-mor {

                        >a {
                            display: block;
                            width: 234px;
                            height: 143px;
                            color: #fff;
                            text-decoration: none;
                            margin-bottom: 12px;
                            margin-left: 14px;
                            border: 1px solid;
                            background-color: #fff;

                            // align-items: center;
                            >div {
                                width: 94px;
                                height: 45px;
                                color: #333;
                                font-size: 18px;
                                float: left;
                                margin: 52px 20px 0 20px;

                                p {
                                    font-size: 12px;
                                    color: #757575;
                                    margin-left: -48px;
                                }

                            }

                            >.center-computer {
                                width: 94px;
                                height: 45px;
                                color: #333;
                                font-size: 14px;
                                float: left;
                                margin: 40px 20px 0 20px;

                                p {
                                    font-size: 14px;
                                    color: #ff6700;
                                    margin-left: -44px;
                                    margin-top: 10px;
                                }
                            }

                            >img {
                                height: 80px;
                                width: 80px;
                                float: left;
                                margin: 35px 0 0 -10px;
                            }

                            >span {
                                float: left;
                                margin: 45px 0 0 10px;
                                font-size: 48px;
                                color: #ff6700;
                            }

                        }
                    }
                }
            }
        }
    }







    
    #center-left-0 {
        width: 995px;
        height: 460px;
        border: 1px solid #B0B0B0;
        position: absolute;
        top: -20px;
        left: 36px;
        box-shadow: -3px 3px 10px 0.6px #B0B0B0;
        background-color: #fff;
        z-index: 20;
        display: none;
        .big-div{
            float: left;
            width: 248px;
            height: 460px;
            div {
                width: 248px;
                height:76.5px;
                // background-color: red;
                line-height: 76.5px;
                position: relative;
                >img {
                    margin: 12px 10px 0 10px;
                    // float: left;
                }
                >span{
                    position: absolute;
                    top: 0px;
                    left: 80px;
                    font-size: 14px;
                    color: #000;
                    &:hover{
                        color: #ff6700;
                    }
                }
                }
                
        }
        
    }


    #center-left-1 {
        width: 995px;
        height: 460px;
        border: 1px solid #B0B0B0;
        position: absolute;
        top: -62px;
        left: 36px;
        box-shadow: -3px 3px 10px 0.6px #B0B0B0;
        background-color: #fff;
        z-index: 20;
        display: none;
        .big-div{
            float: left;
            width: 248px;
            height: 460px;
            div {
                width: 248px;
                height:76.5px;
                // background-color: red;
                line-height: 76.5px;
                position: relative;
                >img {
                    margin: 12px 10px 0 10px;
                    // float: left;
                }
                >span{
                    position: absolute;
                    top: 0px;
                    left: 80px;
                    font-size: 14px;
                    color: #000;
                    &:hover{
                        color: #ff6700;
                    }
                }
            }
        }
        
    }


    #center-left-2 {
        width: 995px;
        height: 460px;
        border: 1px solid #B0B0B0;
        position: absolute;
        top: -104px;
        left: 36px;
        box-shadow: -3px 3px 10px 0.6px #B0B0B0;
        background-color: #fff;
        z-index: 20;
        display: none;
        .big-div{
            float: left;
            width:248 px;
            height: 460px;
            div {
                width: 248px;
                height:76.5px;
                // background-color: red;
                line-height: 76.5px;
                position: relative;
                >img {
                    margin: 12px 10px 0 10px;
                    // float: left;
                }
                >span{
                    position: absolute;
                    top: 0px;
                    left: 80px;
                    font-size: 14px;
                    color: #000;
                    &:hover{
                        color: #ff6700;
                    }
                }
            }
        }
        
    }
    #center-left-3 {
        width: 750px;
        height: 460px;
        border: 1px solid #B0B0B0;
        position: absolute;
        top: -146px;
        left: 36px;
        box-shadow: -3px 3px 10px 0.6px #B0B0B0;
        background-color: #fff;
        z-index: 20;
        display: none;
        .big-div{
            float: left;
            width: 248px;
            height: 460px;
            div {
                width: 248px;
                height:76.5px;
                // background-color: red;
                line-height: 76.5px;
                position: relative;
                >img {
                    margin: 12px 10px 0 10px;
                    // float: left;
                }
                >span{
                    position: absolute;
                    top: 0px;
                    left: 80px;
                    font-size: 14px;
                    color: #000;
                    &:hover{
                        color: #ff6700;
                    }
                }
            }
        }
        
    }

    #center-left-4 {
        width: 995px;
        height: 460px;
        border: 1px solid #B0B0B0;
        position: absolute;
        top: -188px;
        left: 36px;
        box-shadow: -3px 3px 10px 0.6px #B0B0B0;
        background-color: #fff;
        z-index: 20;
        display: none;
        .big-div{
            float: left;
            width: 248px;
            height: 460px;
            div {
                width: 248px;
                height:76.5px;
                // background-color: red;
                line-height: 76.5px;
                position: relative;
                >img {
                    margin: 12px 10px 0 10px;
                    // float: left;
                }
                >span{
                    position: absolute;
                    top: 0px;
                    left: 80px;
                    font-size: 14px;
                    color: #000;
                    &:hover{
                        color: #ff6700;
                    }
                }
            }
        }
        
    }



    #center-left-5 {
        width: 995px;
        height: 460px;
        border: 1px solid #B0B0B0;
        position: absolute;
        top: -230px;
        left: 36px;
        box-shadow: -3px 3px 10px 0.6px #B0B0B0;
        background-color: #fff;
        z-index: 20;
        display: none;
        .big-div{
            float: left;
            width: 248px;
            height: 460px;
            div {
                width: 248px;
                height:76.5px;
                // background-color: red;
                line-height: 76.5px;
                position: relative;
                >img {
                    margin: 12px 10px 0 10px;
                    // float: left;
                }
                >span{
                    position: absolute;
                    top: 0px;
                    left: 80px;
                    font-size: 14px;
                    color: #000;
                    &:hover{
                        color: #ff6700;
                    }
                }
            }
        }
        
    }

    #center-left-6 {
        width: 750px;
        height: 460px;
        border: 1px solid #B0B0B0;
        position: absolute;
        top: -272px;
        left: 36px;
        box-shadow: -3px 3px 10px 0.6px #B0B0B0;
        background-color: #fff;
        z-index: 20;
        display: none;
        .big-div{
            float: left;
            width: 248px;
            height: 460px;
            div {
                width: 248px;
                height:76.5px;
                // background-color: red;
                line-height: 76.5px;
                position: relative;
                >img {
                    margin: 12px 10px 0 10px;
                    // float: left;
                }
                >span{
                    position: absolute;
                    top: 0px;
                    left: 80px;
                    font-size: 14px;
                    color: #000;
                    &:hover{
                        color: #ff6700;
                    }
                }
            }
        }
        
    }

    #center-left-7 {
        width: 500px;
        height: 460px;
        border: 1px solid #B0B0B0;
        position: absolute;
        top: -314px;
        left: 36px;
        box-shadow: -3px 3px 10px 0.6px #B0B0B0;
        background-color: #fff;
        z-index: 20;
        display: none;
        .big-div{
            float: left;
            width: 248px;
            height: 460px;
            div {
                width: 248px;
                height:76.5px;
                // background-color: red;
                line-height: 76.5px;
                position: relative;
                >img {
                    margin: 12px 10px 0 10px;
                    // float: left;
                }
                >span{
                    position: absolute;
                    top: 0px;
                    left: 80px;
                    font-size: 14px;
                    color: #000;
                    &:hover{
                        color: #ff6700;
                    }
                }
            }
        }
        
    }

    #center-left-8 {
        width: 750px;
        height: 460px;
        border: 1px solid #B0B0B0;
        position: absolute;
        top: -356px;
        left: 36px;
        box-shadow: -3px 3px 10px 0.6px #B0B0B0;
        background-color: #fff;
        z-index: 20;
        display: none;
        .big-div{
            float: left;
            width: 248px;
            height: 460px;
            div {
                width: 248px;
                height:76.5px;
                // background-color: red;
                line-height: 76.5px;
                position: relative;
                >img {
                    margin: 12px 10px 0 10px;
                    // float: left;
                }
                >span{
                    position: absolute;
                    top: 0px;
                    left: 80px;
                    font-size: 14px;
                    color: #000;
                    &:hover{
                        color: #ff6700;
                    }
                }
            }
        }
        
    }

    #center-left-9 {
        width: 750px;
        height: 460px;
        border: 1px solid #B0B0B0;
        position: absolute;
        top: -398px;
        left: 36px;
        box-shadow: -3px 3px 10px 0.6px #B0B0B0;
        background-color: #fff;
        z-index: 20;
        display: none;
        .big-div{
            float: left;
            width: 248px;
            height: 460px;
            div {
                width: 248px;
                height:76.5px;
                // background-color: red;
                line-height: 76.5px;
                position: relative;
                >img {
                    margin: 12px 10px 0 10px;
                    // float: left;
                }
                >span{
                    position: absolute;
                    top: 0px;
                    left: 80px;
                    font-size: 14px;
                    color: #000;
                    &:hover{
                        color: #ff6700;
                    }
                }
            }
        }
        
    }

    #site-header-bottom {
        width: 100%;
        height: 230px;
        border: 1px solid #B0B0B0;
        position: absolute;
        top: 140px;
        left: 0;
        z-index: 20;
        background-color: #fff;
        box-shadow: -3px 3px 10px 0.6px #B0B0B0;
        display: none;
        overflow: hidden;
        // -webkit-transition: height .3s;
        // transition: height 0.3s;
        >ul{
            margin-left: 145px;
            list-style: none;
            >li{
                float: left;
                width: 205px;
                height: 230px;
                
                // border: 1px solid;
                text-align: center;
                >a{
                    display: block;
                    text-decoration: none;
                    margin-top: 20px;
                    color: #757575;
                    >img{
                        // display: block;
                        height: 80%;
                        width: 80%;
                        border-right:3px solid #ccc;
                        
                    }
                    >p{
                        margin-top: 20px;
                        
                    }
                    >em{
                        color: orangered;
                        font-size: 12px;
                    }
                    
                }
                
                
            }
        }
        
    }
    
    >#center-watch {
        >.conter-conter-div {
            height: 614px;
            width: 992px;
            position: absolute;
            display: none;
            top: 1685px;
            left: 381px;
            z-index: 20;
            background-color: #F5F5F5;

            >li {
                list-style: none;
                float: left;

                >a {
                    display: block;
                    height: 300px;
                    width: 234px;
                    color: #fff;
                    text-decoration: none;
                    margin-bottom: 12px;
                    margin-left: 14px;
                    border: 1px solid;
                    background-color: #fff;
                    text-align: center;

                    &:hover {
                        position: relative;
                        top: -4px;
                        box-shadow: -3px 3px 10px 0.6px #B0B0B0;
                        transition: 0.8;
                    }

                    >img {
                        height: 160px;
                        width: 160px;
                        margin-top: 20px;
                    }

                    >h3 {
                        color: #333;
                        margin: 0 10px 2px;
                        font-size: 14px;
                    }

                    >p {
                        color: #B0B0B0;
                        margin: 0 10px 10px;
                        font-size: 12px;
                    }

                    >em {
                        margin: 0 10px 14px;
                        color: #ff6700;
                        font-size: 14px;

                        >span {
                            color: #B0B0B0;
                        }
                    }
                }
            }

            >.center-center-mor {

                >a {
                    display: block;
                    width: 234px;
                    height: 143px;
                    color: #fff;
                    text-decoration: none;
                    margin-bottom: 12px;
                    margin-left: 14px;
                    border: 1px solid;
                    background-color: #fff;

                    // align-items: center;
                    >div {
                        width: 94px;
                        height: 45px;
                        color: #333;
                        font-size: 18px;
                        float: left;
                        margin: 52px 20px 0 20px;

                        p {
                            font-size: 12px;
                            color: #757575;
                            margin-left: -48px;
                        }

                    }

                    >.center-computer {
                        width: 94px;
                        height: 45px;
                        color: #333;
                        font-size: 14px;
                        float: left;
                        margin: 40px 20px 0 20px;

                        p {
                            font-size: 14px;
                            color: #ff6700;
                            margin-left: -44px;
                            margin-top: 10px;
                        }
                    }

                    >img {
                        height: 80px;
                        width: 80px;
                        float: left;
                        margin: 35px 0 0 -10px;
                    }

                    >span {
                        float: left;
                        margin: 45px 0 0 10px;
                        font-size: 48px;
                        color: #ff6700;
                    }

                }
            }
        }


    }

    .site {
        width: 100%;
        background-color: #ffffff;

        .site1 {
            width: 1226px;
            height: 80px;
            border-bottom: 1px solid #aeabab;
            margin: auto;

            >ul {
                width: 1226px;
                height: 25px;
                padding: 27px 0px;
                list-style: none;

                #site3 {
                    border: none;
                }

                a {
                    text-decoration: none;
                    float: left;
                    display: block;
                    width: 242px;
                    height: 25px;
                    font-size: 16px;
                    // background-color: #ff6700;
                    color: #616161;
                    text-align: center;
                    border-right: 1px solid #aeabab;

                    em {
                        font-size: 25px;
                        padding: 8px;
                    }

                    &:hover {
                        color: #ff6700;
                    }
                }
            }
        }

        .site2 {
            width: 1226px;
            height: 252px;
            padding: 40px 0px;
            margin: auto;
            line-height: 25px;

            >dl {
                float: left;
                width: 160px;

                // background-color: #ff6700;
                >dt {
                    margin-bottom: 26px;
                    font-size: 14px;
                    color: #424242;
                }

                >dd {
                    >a {
                        font-size: 12px;
                        margin-top: 10px;
                        color: #757575;
                        text-decoration: none;

                        &:hover {
                            color: #ff6700;
                        }
                    }
                }
            }

            .col {
                width: 251px;
                float: left;
                height: 111px;
                margin-left: 10px;
                border-left: 1px solid #aeabab;
                text-align: center;

                >h2 {
                    color: #ff6700;
                    font-size: 22px;
                    font-weight: 500;
                }

                >p {
                    font-size: 12px;
                    color: #616161;
                }

                >a {
                    display: block;
                    width: 120px;
                    height: 30px;
                    color: #ff6700;
                    border: 1px solid #ff6700;
                    margin: auto;
                    margin-top: 5px;
                    line-height: 30px;
                    text-decoration: none;

                    &:hover {
                        color: white;
                        background-color: #ff6700;
                    }
                }

                >div {
                    font-size: 12px;
                    color: #616161;
                    margin-top: 10px;

                    >em {
                        font-size: 24px;
                    }
                }
            }
        }
    }

    // 尾部
    .fooder {
        width: 100%;
        background-color: #fafafa;

        .fooder1 {
            width: 1226px;
            height: 265px;
            padding: 30px 0px;
            margin: auto;
            font-size: 12px;
            color: #b0b0b0;

            >.fooder2 {
                float: left;
                display: block;
                width: 56px;
                height: 56px;
                border-radius: 20px;
                margin-right: 20px;
                margin-bottom: 40px;
            }

            >h2 {
                font-weight: 500;
                color: #757575;
                font-size: 12px;
                margin: 2px;
            }

            p {
                margin: 2px;
            }

            .fooder3 {
                width: 1226px;
                height: 28px;
                margin-top: 4px;
                padding: 0px 0px 0px 77px;
                position: relative;
                img {
                    float: left;
                    display: block;
                    width: 85px;
                    height: 28px;
                }
                .fooder3-img{
                    position: absolute;
                    width: 85px;
                    height: 28px;
                    left: 417px;
                    >img {
                        float: left;
                        display: block;
                        width: 85px;
                        height: 28px;
                        display: none;
                    }
                }
                

            }

            .fooder4 {
                width: 1226px;
                height: 19px;
                margin: auto;
                text-align: center;
                margin-top: 44px;
                font-size: 20px;
                font-family: cursive;
            }
        }
    }



    .app-suspension {
        list-style: none;
        position: fixed;
        bottom: 70px;
        right: 0;
        z-index: 99;
        a{
            position: relative;
            display: block;
            text-decoration: none;
            font-size: 14px;
            width: 82px;
            height: 90px;
            margin-top: -1px;
            padding-top: 50px;
            color: #757575;
            background-color: #fff;
            border: 1px solid #f5f5f5;
            text-align: center;
            &:hover{
                color: #ff6700;
            }
            >.header-nav-div-app {
                position: absolute;
                top: 0px;
                right: 95px;
                width: 124px;
                height: 0px;
                // margin-left: -55px;
                -webkit-box-shadow: #aaa 0 1px 5px;
                box-shadow: 0 1px 5px #aaa;
                background-color: #fff;
                text-align: center;
                font-size: 14px;
                color: #333;
                z-index: 20;
                line-height: 1;
                overflow: hidden;
                // -webkit-transition: height .3s;
                // transition: height 0.3s;

                // display: none;
                
                >img {
                    display: block;
                    margin: 18px auto 12px;
                    // border: 0;
                    width: 90px;
                    height: 90px;

                }
                >span{
                    display: block;
                    margin: 0px 25px;
                    line-height: 20px;
                }
            }
            >em{
                position: absolute;
                top: 15px;
                left: 25px;
                font-size: 30px;
            }
        }
        .frist-app:hover .header-nav-div-app {
            height: 170px;
            // display: block;
        }

        >.last-app{
            margin-top: 20px;
            display: none;
        }
    }

}